<!-- 选项个数组件 -->
<template>
  <div class="option-list">
    <div v-for="optionItem in optionArray" :class="option == optionItem ? 'item active' : 'item'" @click="chooseOptionClick(optionItem)">{{ optionItem }}</div>
  </div>
</template>

<script>
export default {
  name: 'OptionChoose',
  model: {
    prop: 'option',
    event: 'parent-event'
  },
  props: {
    option: Number,
    optionArray: {
      type: Array,
      default: []
    }
  },
  methods: {
    chooseOptionClick(optionItem) {
      if (optionItem != this.option) {
        this.$emit('parent-event', optionItem)
        this.$emit('clickCallback', optionItem)
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .option-list {
    display: flex;
    .item {
      border-left: 1px solid #DCDCDC;
      border-top: 1px solid #DCDCDC;
      border-bottom: 1px solid #DCDCDC;
      width: 120px;
      text-align: center;
      height: 30px;
      line-height: 30px;
      cursor: pointer;
    }
    .item:last-child {
      border-right: 1px solid #DCDCDC;
    }
    .item.active {
      cursor: text;
      background: #409eff;
      color: #FFFFFF;
    }
  }
</style>
